@import org.scalaexercises.types.user._
@import org.scalaexercises.types.progress._
@import org.scalaexercises.types.exercises._
@import play.api.Play.current
@import org.scalaexercises.exercises.utils.StringUtils._
@(library: Library, section: Section, progress: LibraryProgress, user: Option[User] = None, redirectUrl: Option[String] = Some("#"), contributors: List[Contributor])(implicit request: RequestHeader)


<!DOCTYPE html>
<html lang="en">
  <head>
    @templates.base.head(s"${library.name} | ${section.name}", library.description)
    <!-- CSS -->
    <link rel="stylesheet" media="screen" href="@routes.Assets.at("lib/highlightjs/styles/atelier-savanna-dark.css")" />
  </head>
  <body data-library="@library.name" data-section="@section.name">
    <header class="navbar navbar-inverse navbar-fixed-top" style="background-color: @library.color ;" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="/" class="navbar-brand">
            <img src=@routes.Assets.at("images/navbar_brand_light.svg") alt="">
            <span>Scala Exercises</span>
          </a>
        </div>

        <div id="navbar-sections" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
          @user match {
            case Some(u) => { @templates.base.userInfo(u) }
            case None => {
            <li><a href="@redirectUrl"><i class="fa fa-github"></i>Login with GitHub</a></li> }
          }

          @for(sectionName <- library.sectionNames) {
            @templates.library.sectionRow(
              sectionName = sectionName,
              color = library.color,
              highlight = sectionName == section.name,
              completed = progress.sections.find(_.sectionName == sectionName).fold(false)(_.succeeded)
            )
          }
          </ul>
        </div>
          <!--.nav-collapse -->
      </div>
    </header>
    <div id="wrapper">

      <section id="sidebar">
          <div class="header-technologie">
              <div class="content-logo-technologie" style="background-color: @library.color;">
                   <img src="data:image/svg+xml;base64,@library.logoData.getOrElse("")"/>
              </div>
              <h1 class="text-center">@library.name.humanizeUnderscore</h1>
          </div>
       
        @templates.widgets.progress(progress.completedSections, progress.totalSections, library.color)
        <ul>
          <li>
            <h3>Sections</h3>
          </li>

          @for(sectionName <- library.sectionNames) {
            @templates.library.sectionRow(
              sectionName = sectionName,
              color = library.color,
              highlight = sectionName == section.name,
              completed = progress.sections.find(_.sectionName == sectionName).fold(false)(_.succeeded)
            )
          }

        </ul>
      </section>

      <section id="content-detail">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-12">

              <div class="content-header clearfix">
                <h2 class="pull-left">@section.name.humanizeUnderscore</h2>
                <div class="add-exercises pull-right hidden-xs">
                  <a href="https://github.com/@library.owner/@library.repository/blob/master@section.path.getOrElse("")" target="_blank" type="button" class="btn btn-default btn-sm">View on GitHub</a>
                </div>
              </div>


              <div class="exercises-wrapper">

                @section.description.map { d => @Html(d) }

                @for(exercise <- section.exercises) {
                  @templates.library.exercise(library, section, exercise, user)
                }

              </div>

              <div class="contributors clearfix">

                @templates.library.contributors(contributors)

                <ul>
                  <li> <a href="https://github.com/@library.owner/@library.repository/edit/master@section.path.getOrElse("")" target="_blank"><i class="fa fa-pencil"></i>Edit exercises</a>
                  </li>
                </ul>
              </div>

              @templates.library.gitter()

            </div>
          </div>
        </div>

      </section>
      @templates.library.footer()
    </div>

    @templates.library.commits_modal(section)
    @templates.library.mustsignup_modal(redirectUrl)

    <!-- JS -->
    @templates.widgets.ga()
    <script src="@routes.Assets.at("lib/highlightjs/highlight.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("lib/highlightjs/languages/scala.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/emojify-cdn.js")"></script>
    <script src="@org.scalaexercises.exercises.controllers.routes.ApplicationController.javascriptRoutes" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    @scalajs.html.scripts(
    "client",
    name => routes.Assets.at(name).toString,
    name => getClass.getResource(s"/public/$name") != null)
    
  </body>
</html>
